<template>
    <div>
        <div class="search">
            <input v-model="keyword" class="search-input" type="text" placeholder="输入城市名或拼音" />
        </div>
        <div class="search-content" ref="search" v-show="keyword">
            <ul>
                <li class="search-item border-bottom" v-for="item of list" :key="item.id"
                  @click="handleCityClick(item.name)">
                    {{item.name}}
                </li>
                <li class="search-item border-bottom" v-show="hasNodata">
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    </div>
</template>
<script>
    import Bscroll from 'better-scroll'
    import {mapMutations} from 'vuex'
    export default{
        name: 'CitySearch',
        props: {
            cities: Object
        },
        data () {
            return {
                keyword: '',
                list: [],
                timer: null
            }
        },
        computed:{
            hasNodata (){
                return !this.list.length
            }
        },
        watch: {
            keyword () {
                if (this.timer) {
                    clearTimeout(this.timer)
                }
                if (!this.keyword) {
                    this.list = []
                    return
                }
                this.timer = setTimeout(() => {
                    const result = []
                    for (let i in this.cities) {
                    this.cities[i].forEach((value) => {
                        if (value.spell.indexOf(this.keyword) > -1 || value.name.indexOf(this.keyword) > -1) {
                        result.push(value)
                    }
                })
                }
                this.list = result
            }, 100)
            }
        },
        methods:{
            handleCityClick (city) {
                 //this.$store.commit("changeCity",city)
                 this.changeCity(city)
                 this.$router.push('/')
                 },
                 ...mapMutations(['changeCity'])
            
        },
        // mounted (){
        // this.scroll=new Bscroll(this.$refs.search)
        //}
        mounted () {
            this.scroll = new Bscroll(this.$refs.search,{ mouseWheel: true, click: true, tap: true })
        }
    }
</script>
<style lang="stylus" scoped>
    @import '../../assets/styles/varibles.styl'
    .search
        padding:0 .1rem
        height:.72rem
        background:$bgColor
    .search-input
        box-sizing:border-box
        width: 100%
        height:.62rem
        padding:0 .2rem
        line-height:.62rem
        text-align:center
        border-radius:.06rem
        color: #666
    .search-content
        z-index :1
        overflow:hidden
        position:absolute
        top:1.58rem
        left:0
        right:0
        bottom:0
        background: #eee
    .search-item
        line-height:.62rem
        padding-left:.2rem
        background:#fff
        color:#666
</style>